﻿@{
	Layout = "_LayoutSelectList";
	ViewBag.Title = "选择图标";
}

@section header{
	<style>
		.list-inline {
			margin: 5px 0 0 0;
			padding-left: 0;
			list-style: none;
		}

		.list-inline > li {
			display: inline-block;
			width: 41px;
			height: 42px;
			line-height: 42px;
			border: 1px solid #efefef;
			padding: 1px;
			margin: 1px;
			text-align: center;
			font-size: 18px;
		}

		.list-inline > li:hover {
			border: 1px solid #2c3e50;
			cursor: pointer;
		}
	</style>
}


<div class="windLayerDiv" style="">
	<table style="background-color: rgb(234, 234, 234);width:100%;" class="small" border="0" cellpadding="3" cellspacing="1">
		<tr class="detail-content-heading" style="height: 28px;">
			<td>
				<b>&nbsp;&nbsp;@ViewBag.Title</b>
			</td>
		</tr>
		<tr bgcolor="white" height="25px;">
			<td>
				<ul class="list-inline">
					<li v-for="ico in icons" :data-icon="ico" :title="ico" @@click="handleIconSelect(ico)">
						<i :class="ico"></i>
					</li>
				</ul>
			</td>
		</tr>
	</table>
	<div class="windLayerFoot">
		&nbsp;
	</div>
	<div class="windLayerCorner">
		&nbsp;
	</div>
</div>
@section footer{
	<script type="text/javascript">
		var pageData = {
			hideBreadcrumb: false,
			global: globalData,
			icons: [],
		};

		var pageApp = new Vue({
			el: '#app',
			data: pageData,
			mounted: function () {
				this.loadAllIcons();
			},
			methods: {
				loadAllIcons: function () {
					var reg = new RegExp("icon-[^:]+", "ig");
					var icons = [];
					var self = this;
					$.get("//at.alicdn.com/t/font_1956173_tc74it1f66.css", function (resp) {
						var result;
						while ((result = reg.exec(resp)) != null) {
							icons.push(result[0]);
						}
						self.icons = icons;
					});
				},
				handleIconSelect: function (ico) {
					var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
					parent.@(ViewData["callback"]) && parent.@(ViewData["callback"])(ico);
					parent.layer.close(index);
				}
			},
			computed: {
			},
			filters: {
			}
		});
	</script>
}